<template>
  <div>
    <ul>
      <li v-for="(comment) in state.articleList" :key="comment.id">
        <comment-card :comment="comment"/>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import CommentCard from "@/components/comment/CommentCard.vue";
import {reactive} from "vue";
import {ArticleComment} from "@/entity/article/view";

interface ArticleCommentProps {
  // 传入文章ID
  articleId: string;
}

// eslint-disable-next-line no-undef
const props = defineProps<ArticleCommentProps>();

//TODO 根据文章ID去查询文章评论

interface ArticleCommentState {
  articleList: ArticleComment[];
}

const state = reactive<ArticleCommentState>({
  articleList: []
});

for (let i = 0; i < 5; i++) {
  state.articleList.push({
    id: "114514",
    articleId: "115",
    name: "厉不厉害你kun哥",
    content: "只因你太美 baby 只因你太美 baby，" +
        "只因你实在是太美 baby 只因你太美 baby，" +
        "迎面走来的你让我如此蠢蠢欲动," +
        "这种感觉我从未有，" +
        "Cause I got a crush on you who you，" +
        "你是我的我是你的谁，" +
        "再多一眼看一眼就会爆炸，" +
        "再近一点靠近点快被融化，" +
        "想要把你占为己有baby bae，" +
        "不管走到哪里都会想起的人是你 you you，" +
        "我应该拿你怎样",
    date: "2022-12-13"
  });
}

</script>

<style scoped>

</style>